<template>
  <div class="statistics">
    <header>疫情信息统计</header>
    <main>
      <div class="head clearfix">
        <desc-title :descTitle="'全国疫情统计'"></desc-title>
        <span class="time">当前时间：{{ createTime }}</span>
      </div>
      <div>
        <table cellspacing="0">
          <thead>
            <th></th>
            <th>现存确诊人数</th>
            <th>疑似人数</th>
            <th>死亡人数</th>
            <th>治愈人数</th>
          </thead>
          <tbody>
            <tr>
              <td>昨天</td>
              <td>{{ lastStatistics.currentConfirmedCount }}</td>
              <td>{{ lastStatistics.suspectedCount }}</td>
              <td>{{ lastStatistics.deadCount }}</td>
              <td>{{ lastStatistics.curedCount}}</td>
            </tr>
            <tr>
              <td>今日</td>
              <td>
                <el-input v-model.number="statistics.currentConfirmedCount"  placeholder="请输入数据" @change="autoCalc($event,'currentConfirmedCount','currentConfirmedIncr')"></el-input>
                <span v-if="currentConfirmedError" class="errorText">请输入</span>
              </td>
              <td>
                <el-input v-model.number="statistics.suspectedCount"  placeholder="请输入数据" @change="autoCalc($event,'suspectedCount','suspectedIncr')"></el-input>
                <span v-if="suspectedError" class="errorText">请输入</span>
              </td>
               <td>
                <el-input v-model.number="statistics.deadCount"  placeholder="请输入数据" @change="autoCalc($event,'deadCount','deadIncr')"></el-input>
                <span v-if="deadError" class="errorText">请输入</span>
              </td>
              <td>
                <el-input v-model.number="statistics.curedCount" placeholder="请输入数据" @change="autoCalc($event,'curedCount','curedIncr')"></el-input>
                <span v-if="curedError" class="errorText">请输入</span>
              </td>
            </tr>
            <tr>
              <td>较昨日</td>
              <td>
                <div class="autoData">{{statistics.currentConfirmedIncr}}</div>
              </td>
              <td>
                <div class="autoData">{{statistics.suspectedIncr}}</div>
              </td>
              <td>
                <div class="autoData">{{statistics.deadIncr}}</div>
              </td>
              <td>
                <div class="autoData">{{statistics.curedIncr}}</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="head clearfix">
        <desc-title :descTitle="'全国疫情预测数据'"></desc-title>
      </div>
      <div class="predictCode">
        <span>预测数据代码：</span>
        <div>
          <el-input
            type="textarea"
            :rows="12"
            placeholder="请输入预测数据代码"
            v-model="statistics.predictData"
          ></el-input>
          <!-- <pre>{{statistics.predictData}}</pre> -->
          <div v-if="codeError" class="errorText">代码输入有误，请重新输入</div>
          <div v-if="textError" class="errorText">请输入</div>
        </div>
      </div>
      <el-button type="primary" @click="upload" class="upload">上传</el-button>
    </main>
  </div>
</template>
<script>
import moment from 'moment'
import { saveEpidemicInfo, getEpidemicInfo } from '@/api/statistics'

export default {
  data () {
    return {
      timeInterval: '',
      createTime: '',
      lastStatistics: {
        currentConfirmedCount: '',
        suspectedCount: '',
        deadCount: '',
        curedCount: ''
      },
      statistics: {
        currentConfirmedCount: '',
        deadCount: '',
        suspectedCount: '',
        curedCount: '',
        currentConfirmedIncr: '',
        deadIncr: '',
        suspectedIncr: '',
        curedIncr: '',
        predictData: ''
      },
      codeError: false,
      textError: false,
      currentConfirmedError: false,
      deadError: false,
      suspectedError: false,
      curedError: false,
      currentConfirmedIncrError: false,
      deadIncrError: false,
      suspectedIncrError: false,
      curedIncrError: false
    }
  },
  methods: {
    autoCalc (val, last, change) {
      let newVal = val - this.lastStatistics[last]
      if (Number(newVal) > 0) {
        newVal = '+' + newVal
      }
      this.statistics[change] = newVal
    },
    takeNumber (val) {
      this.$_takeNumber()
    },
    // 创建定时器
    createInterval () {
      this.timeInterval = setInterval(() => {
        this.statistics.time = moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
        this.createTime = moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
      }, 1000)
    },
    // 销毁定时器
    deleteInterval () {
      clearInterval(this.timeInterval)
    },
    upload () {
      this.errorTextShow()
      if (!this.validate) return
      saveEpidemicInfo(this.statistics).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.codeError = false
        } else if (res.data.code === 400) {
          this.codeError = true
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    errorTextShow () {
      const statistics = this.statistics
      if (statistics.currentConfirmedCount === '') {
        this.currentConfirmedError = true
      } else {
        this.currentConfirmedError = false
      }
      if (statistics.deadCount === '') {
        this.deadError = true
      } else {
        this.deadError = false
      }
      if (statistics.suspectedCount === '') {
        this.suspectedError = true
      } else {
        this.suspectedError = false
      }
      if (statistics.curedCount === '') {
        this.curedError = true
      } else {
        this.curedError = false
      }
      if (statistics.currentConfirmedIncr === '') {
        this.currentConfirmedIncrError = true
      } else {
        this.currentConfirmedIncrError = false
      }
      if (statistics.deadIncr === '') {
        this.deadIncrError = true
      } else {
        this.deadIncrError = false
      }
      if (statistics.suspectedIncr === '') {
        this.suspectedIncrError = true
      } else {
        this.suspectedIncrError = false
      }
      if (statistics.curedIncr === '') {
        this.curedIncrError = true
      } else {
        this.curedIncrError = false
      }
      if (statistics.predictData === '') {
        this.textError = true
      } else {
        this.textError = false
      }
    }
  },
  computed: {
    validate () {
      const statistics = this.statistics
      if (statistics.currentConfirmedCount === '') {
        return false
      }
      if (statistics.deadCount === '') {
        return false
      }
      if (statistics.suspectedCount === '') {
        return false
      }
      if (statistics.curedCount === '') {
        return false
      }
      if (statistics.currentConfirmedIncr === '') {
        return false
      }
      if (statistics.deadIncr === '') {
        return false
      }
      if (statistics.suspectedIncr === '') {
        return false
      }
      if (statistics.curedIncr === '') {
        return false
      }
      if (statistics.predictData === '') {
        return false
      }
      return true
    }
  },
  created () {
    this.createInterval()
    getEpidemicInfo().then((res) => {
      if (res.data.code === 200) {
        const result = res.data.data
        if (result.lastStatistics) {
          this.lastStatistics = result.lastStatistics
          // console.log(this.lastStatistics)
        }
        if (result.statistics) {
          const object = result.statistics
          for (const key in object) {
            if (key.indexOf('Incr') !== -1 && Number(object[key]) > 0) {
              object[key] = '+' + object[key]
            }
          }
          this.statistics = object
          // console.log(this.statistics)
          this.statistics.predictData = JSON.stringify(
            JSON.parse(this.statistics.predictData),
            null,
            4
          )
        }
      } else {
        this.$message({
          type: 'error',
          message: res.data.message
        })
      }
    })
  },
  beforeDestroy () {
    this.deleteInterval()
  }
}
</script>

<style scoped lang="scss">
.statistics {
  padding: 0 30px 30px;
  height: 100%;
  overflow-y: auto;
  header {
    height: 90px;
    line-height: 90px;
    color: #333;
    font-size: 24px;
    font-weight: bold;
  }

  main {
    min-height: calc(100% - 90px);
    background-color: #fff;
    border-radius: 5px;
    padding: 0 30px;
    .head {
      position: relative;
      ::v-deep .header{
        padding-left: 0;
      }
      .time {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #4868ff;
        font-size: 16px;
      }
    }
    table {
      width: 100%;
      thead {
        font-weight: 500;
        font-size: 14px;
        background: rgba(87, 131, 255, 0.05);
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
      tbody {
        tr {
          td {
            width: 150px;
            padding-left: 24px;
            height: 64px;
            line-height: 64px;
            border-bottom: 1px solid #f2f2f2;
            color: #666666;
            font-size: 14px;
            .el-input {
              width: 200px;
              height: 36px;
            }
            .errorText {
              color: #ff2b2b;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 17px;
              margin-left: 10px;
            }
            .autoData{
              width: 200px;
              height: 40px;
              border: 1px solid #DCDFE6;
              line-height: 40px;
              border-radius: 4px;
              padding: 0 15px;
            }
          }
        }
      }
    }
    .predictCode {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 50px;
      span {
        height:22px;
        font-size:16px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:22px;
        margin-left: 124px;
        margin-top: 5px;
      }
      .el-textarea {
        width: 720px;
        margin-left: 10px;
      }
      .errorText {
        color: #ff2b2b;
        width: 144px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 17px;
        margin-top: 5px;
        margin-left: 10px;
      }
    }
    .upload {
      margin-left: 248px;
      font-size: 18px;
      width: 172px;
      height: 48px;
      background: rgba(72, 104, 255, 1);
      border-radius: 24px;
      margin-bottom: 25px;
    }
  }
}
</style>
